<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // 知识点:
        // 箭头函数
        // this
        // 运算符优先级
        // 异步 微任务 宏任务

        // var a = 10;
        // var obj = {
        //     a:100,
        //     pro:{
        //         getPro: () => {
        //             console.log(this.a);//箭头函数不会创建自己的this,它只会从自己的作用域链的上一层去继承this,所以此处的this指向window
        //         },
        //     },
        // };
        // obj.pro.getPro();//10  

        var a = {
            n:1
        };
        var b = a;//这里并不是新建一个和对象a一样的对象,而是把对象a的内存地址赋值给对象b;a和b此时是指向同一个内存地址;而当a被重新赋值后,a就会生成一个新的内存地址
        a.x = a = { n:2 }; // 运算符优先级:   .  >  =  ;  赋值运算是从右往左 ;
        // 个人分析:
        // 1,  根据运算符优先级先进行 a.x ;  此时a={n:1,x}  ; 而b指向的对象和a是同一个,所以此时b={n:1,x}
        // 2,  赋值运算: 从右往左, 先 a = { n:2 },所以a被重新赋值了,a此时已经不存在key(x)了.  
        // 3,  再a.x = {n:2}, 对于a,已经没有x属性了,此时相当于把一个值{n:2}赋给undefined ,对于b,此时相当于b.x = {n:2}
        // 4,  所以最终a={n:2}   b={n:1,x:{n:2}}
        console.log(a.x);//undefined   ===> 因为a没有x a={n:2}
        console.log(b.x);//{n:2}   ===> b= { n:1, x:{ n:2 } }

        // 知识拓展:关于对象赋初值和重新赋值
        var arr1 = [1,2,3];//生成一个内存地址,存储arr1的值
        var arr2 = arr1;//将arr1的内存地址赋给arr2.
        arr2.push(4);//操作arr2,因为和arr1都是指向同一个内存地址,所以操作的是同一个数据,arr1的值也会改变
        console.log(arr1);//[1,2,3,4]
    </script>
</body>
</html>